body,html {
    padding: 0;
    margin: 0;
    overflow: hidden
}

#ROOT,body,html {
    width: 100%;
    height: 100%;
    position: relative
}

.blocklyWidgetDiv {
    display: none !important
}

.showAndHidden {
    width: auto;
    padding: 10px 14px;
    position: absolute;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    border-radius: 8px;
    z-index: 9999999;
    background: hsla(0, 0%, 100%, .8);
    opacity: 0;
    left: 50%;
    transform: translate(-50%);
    visibility: hidden;
    animation: showAndHiddenA 1.2s 1;
    font-size: 14px
}

@keyframes showAndHiddenA {
    0% {
        opacity: 0;
        top: 0;
        visibility: hidden
    }

    20% {
        opacity: 1;
        top: 40px;
        visibility: visible
    }

    80% {
        opacity: 1;
        top: 40px;
        visibility: visible
    }

    to {
        opacity: 0;
        top: 0;
        visibility: hidden
    }
}

.success {
    color: #5daa69
}

.error {
    color: #ff7e7e
}

.floatBox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999999;
    background: rgba(0, 0, 0, .5);
    transition: all .3s;
    opacity: 0;
    visibility: hidden
}

.showModalBox {
    opacity: 1;
    visibility: visible
}

.hiddenModalBox {
    opacity: 0;
    visibility: hidden
}

.minClickBoxs .clickBox {
    margin-left: 3px !important;
    margin-right: 3px !important
}

.modalContentBox {
    padding: 16px 16px 70px;
    background: #f7f7f7;
    border-radius: 16px;
    box-sizing: border-box;
    min-width: 270px;
    min-height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.modalContentBox .modelMsg {
    margin: 0 auto;
    color: #666;
    width: 300px;
    font-size: 12px;
    font-family: PingFang SC
}

.modalContentBox .valItem {
    width: 100%;
    padding: 6px 10px;
    border-radius: 10px;
    box-sizing: border-box;
    color: #8e8e8e;
    border: 1px solid #8e8e8e;
    margin-bottom: 10px
}

.modalContentBox .beActive {
    border: 1px solid #1e6ceb;
    color: #1e6ceb
}

.modalContentBox .btnBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    position: absolute;
    left: 0;
    bottom: 16px
}

.modalContentBox .btnBox .btnBlue {
    height: 36px;
    line-height: 36px;
    background: #00adef;
    font-size: 14px;
    text-align: center;
    min-width: 100px;
    color: #fff;
    border-radius: 18px
}

.modalContentBox .btnBox .btnBlue:active {
    background: #51ceff
}

.modalContentBox .btnBox .btnGray {
    height: 36px;
    line-height: 36px;
    background: #e7e7e7;
    font-size: 14px;
    text-align: center;
    min-width: 100px;
    color: #666;
    border-radius: 18px
}

.modalContentBox .btnBox .btnGray:active {
    background: #888
}

.modalContentBox .btnBox .btnRed {
    height: 36px;
    line-height: 36px;
    background: #ff5a46;
    font-size: 14px;
    text-align: center;
    min-width: 100px;
    color: #fff;
    border-radius: 18px
}

.modalContentBox .btnBox .btnRed:active {
    background: #ff9185
}

.modalContentBox .borderBox {
    box-sizing: border-box
}

.modalContentBox .inputBox {
    position: relative
}

.modalContentBox .inputBox .numInput {
    width: 100%;
    height: 36px;
    background: #eee;
    padding-left: 20px;
    border-radius: 36px;
    position: relative;
    outline: none;
    border: 0 solid #ccc;
    box-shadow: 0 3px 0 #cbcbcb;
    box-sizing: border-box
}

.modalContentBox .inputBox .deleteIcon {
    width: 23px;
    height: 16px;
    position: absolute;
    transform: translateY(-50%);
    right: 20px;
    top: 50%
}

.modalContentBox .inputBox .modalTextSpan {
    font-size: 12px;
    display: block;
    font-family: PingFang SC;
    font-weight: 700;
    color: #8e8e8e;
    line-height: 21px;
    width: 193px;
    margin: 0 auto;
    text-align: center
}

.modalContentBox .jsuanqi {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    background: #eee;
    margin-top: 14px;
    border-radius: 16px
}

.modalContentBox .jsuanqi .one {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    font-weight: 700;
    color: #969696;
    border-bottom: 1px solid #b2b2b2
}

.modalContentBox .jsuanqi .one:last-child {
    border-bottom: 0 solid #b2b2b2
}

.modalContentBox .jsuanqi .one>div {
    width: 30%;
    border-right: 1px solid #b2b2b2;
    flex: 1
}

.modalContentBox .jsuanqi .one>div:last-child {
    border-right: 0 solid #b2b2b2
}

.modalContentBox .modalTitle {
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 700;
    color: #8e8e8e;
    line-height: 14px;
    margin: 16px 0
}

.modalContentBox .modelContent {
    margin: 0;
    display: flex;
    justify-content: space-around
}

.modalContentBox .modelContent .active img {
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid #00adef !important
}

.modalContentBox .modelContent .active .imgTitle {
    color: #00adef
}

.modalContentBox .modelContent .activeColor {
    box-sizing: border-box;
    border: 2px solid #00adef !important
}

.modalContentBox .colorBox {
    width: 50px;
    height: 50px
}

.modalContentBox .clickBox {
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    margin: 13px;
    flex: none
}

.modalContentBox .clickBox img {
    box-sizing: border-box;
    display: block;
    border: 2px solid transparent
}

.modalContentBox .clickBox .imgTitle {
    font-size: 12px;
    color: #8e8e8e;
    display: block;
    text-align: center;
    line-height: 13px;
    margin-top: 10px
}

.modalContentBox .imgXJ .xunjiimg {
    width: 150px;
    height: 67px
}

.modalContentBox .imgDJ {
    min-width: 240px
}

.modalContentBox .imgDJ .xunjiimg {
    width: 67px;
    height: 67px
}

.modalContentBox .imgOverflow {
    width: 386px;
    height: 168px;
    flex-wrap: wrap;
    overflow: auto;
    justify-content: space-between
}

.modalContentBox .imgOverflow .xunjiimg {
    width: 67px;
    height: 67px
}

.modalContentBox .YSXZ {
    flex-wrap: wrap;
    width: 340px;
    margin: 22px 16px 8px
}

.modalContentBox .YSXZ .clickBox {
    margin: 5px 16px;
    border: 1px solid #ddd
}

.modalContentBox .YSXZ .redLine {
    width: 200%;
    height: 3px;
    background: red;
    transform: rotate(135deg);
    transform-origin: 50% 50%;
    position: relative;
    left: -35%;
    top: 34%
}

.modalContentBox .timeBox {
    width: 380px;
    height: 76px;
    padding-top: 54px;
    position: relative
}

.modalContentBox .timeBox .timeTextBox {
    width: 55px;
    height: 30px;
    line-height: 30px;
    pointer-events: none;
    border: 2px solid #00adef;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    margin-top: -54px;
    margin-left: -28px
}

.modalContentBox .timeBox .timeTextBox:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #00adef;
    left: 19px;
    position: relative
}

.modalContentBox .timeBox .timeTextBox:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 63px;
    left: 17px;
    background: #00adef;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #fff
}

.modalContentBox .timeBox .timeLineBox {
    width: 100%;
    height: 42px;
    background: #dcdcdc;
    border-radius: 42px;
    box-sizing: border-box;
    padding: 0 46px;
    color: #333
}

.modalContentBox .timeBox .timeLineBox .leftNum {
    position: absolute;
    left: -28px;
    top: 10px
}

.modalContentBox .timeBox .timeLineBox .rightNum {
    position: absolute;
    right: -33px;
    top: 10px
}

.modalContentBox .timeBox .timeLineBox .lineRelativeBox {
    width: 100%;
    height: 100%;
    position: relative
}

.modalContentBox .timeBox .timeLineBox .timeLine {
    width: 100%;
    height: 100%
}

.modalContentBox .timeBox .timeLineBox .lineBoxItem {
    display: flex;
    width: 100.7%;
    height: 100%;
    pointer-events: none;
    overflow: inherit;
    align-items: center;
    justify-content: space-between
}

.modalContentBox .timeBox .timeLineBox .lineBoxItem .line1 {
    width: 2px;
    height: 5px;
    background: grey
}

.modalContentBox .timeBox .timeLineBox .lineBoxItem .line2 {
    width: 2px;
    height: 8px;
    background: grey
}

.modalContentBox .timeBox .timeLineBox .lineBoxItem .line3 {
    width: 2px;
    height: 10px;
    background: grey
}

.modalContentBox .timeBox .timeBtnBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px
}

.modalContentBox .timeBox .timeBtnBox img {
    width: 28px;
    height: 28px;
    display: block;
    margin: 0 10px
}

.modalContentBox .carProint {
    width: 7px;
    height: 7px;
    background: #a5a5a5;
    border-radius: 50%
}

.modalContentBox .carImg {
    width: auto !important;
    height: 24px !important
}

.modalContentBox .carSpeedLine {
    width: 100% !important;
    height: 30px !important;
    padding: 0 24px !important
}

.modalContentBox .speedText {
    text-align: center;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: PingFang SC;
    color: #969696
}

.modalContentBox .carTimeTextBox:before {
    top: 57px !important
}

.modalContentBox .activeState:before {
    box-shadow: 0 0 0 5px #00adef
}

.modalContentBox .lightTimeLineBox {
    padding: 0 12px !important;
    height: 26px !important;
    border: 2px solid #ff6060;
    background-image: linear-gradient(90deg, #000, #fff) !important
}

.modalContentBox .lightTimeTextBox:before {
    top: 53px !important
}

.modalContentBox .imgFXXZ {
    position: relative
}

.modalContentBox .imgFXXZ .fxxzImg {
    width: 180px;
    height: 180px
}

.modalContentBox .imgFXXZ .fxxzItems {
    position: absolute;
    left: 50%;
    margin-left: -90px;
    top: 0;
    height: 180px;
    width: 180px;
    display: flex;
    flex-flow: wrap;
    transform: rotate(45deg);
    border: 7px solid #aed8ff;
    border-radius: 50%;
    box-sizing: border-box
}

.modalContentBox .imgFXXZ .fxxzItems:after {
    content: "";
    display: block;
    position: absolute;
    width: 46px;
    height: 46px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%
}

.modalContentBox .imgFXXZ .fxxzItems .active {
    background: rgba(0, 0, 0, .171)
}

.modalContentBox .imgFXXZ .fxxzItems .fxxzItem1 {
    flex-shrink: 0;
    width: 50%;
    height: 50%;
    border-radius: 90px 0 0 0
}

.modalContentBox .imgFXXZ .fxxzItems .fxxzItem2 {
    flex-shrink: 0;
    width: 50%;
    height: 50%;
    border-radius: 0 90px 0 0
}

.modalContentBox .imgFXXZ .fxxzItems .fxxzItem3 {
    flex-shrink: 0;
    width: 50%;
    height: 50%;
    border-radius: 0 0 0 90px
}

.modalContentBox .imgFXXZ .fxxzItems .fxxzItem4 {
    flex-shrink: 0;
    width: 50%;
    height: 50%;
    border-radius: 0 0 90px 0
}

.modalContentBox .qxcgqBtn {
    width: 74px;
    height: 74px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@keyframes showAndHiddenA11 {
    0% {
        left: 10%;
        top: 30%
    }

    50% {
        left: 50%;
        top: 50%
    }

    to {
        left: 50%;
        top: 50%
    }
}

.fullBox,
.helpBox {
    width: 100%;
    height: 100%
}

.helpBox {
    z-index: 99999999;
    background: rgba(0, 0, 0, .4);
    left: 0;
    top: 0
}

.helpBox,
.helpBox .hand {
    position: absolute;
    transition: all 1s
}

.helpBox .hand {
    width: 40px;
    width: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: showAndHiddenA11 2s ease-in-out .5s infinite
}

.paddingLeft80 {
    padding-left: 100px;
    box-sizing: border-box
}

.shadowBox {
    box-shadow: 2px 0 6px rgba(80, 80, 80, .2)
}

.beChose span {
    color: #fff !important
}

.beChose0 {
    background: #f5c500
}

.beChose1 {
    background: #00adef
}

.beChose2 {
    background: #3e93f1
}

.beChose3 {
    background: #856aeb
}

.beChose4 {
    background: #ff5a5a
}

.beChose5 {
    background: #ff8c2f
}

.beChose6 {
    background: #00b94c
}

.pFullBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999
}

.pListBox {
    width: 300px;
    height: 200px;
    position: absolute;
    right: 50px;
    top: 50px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    z-index: 999999;
    overflow: auto;
    box-shadow: 0 1px 9px 0 #b9b9b9
}

.pListBox .pListItem {
    width: 100%;
    line-height: 29px;
    margin-bottom: 14px;
    border: 1px solid #ccc;
    font-size: 14px;
    border-radius: 40px;
    text-align: center;
    color: grey
}

.leftBox {
    min-width: 100px;
    height: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    padding: 8px 14px 0px 50px;
    background: #f7f7f7;
    overflow-y: hidden;
    overflow-x: hidden
}

.leftBox .backBtn {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 8px 14px;
    border-bottom: 1px solid #ccc
}

.leftBox .backBtn img {
    height: 20px;
    position: relative;
    left: 4px;
    top: 9px
}

.leftBox .toolBoxOwn {
    width: 100%;
    box-sizing: border-box;
    padding-top: 84px;
    padding-bottom: 14px;
}

.leftBox .toolBoxOwn .toolItem {
    padding: 6px 16px;
    white-space: nowrap
}

.leftBox .toolBoxOwn .toolItem:hover {
    cursor: pointer
}

.leftBox .toolBoxOwn .toolItem:hover span {
    color: red
}

.leftBox .toolBoxOwn .toolItem img {
    height: 30px;
    width: 30px;
    margin-right: 10px;
    vertical-align: middle
}

.leftBox .toolBoxOwn .toolItem span {
    vertical-align: middle;
    font-size: 12px
}

.leftBox .trashCanImgBox {
    width: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    transform: translateY(-50%);
    opacity: .8
}

.leftBox .trashCanImgBox .img1 {
    position: relative;
    width: 100%;
    transform: rotate(0deg);
    transform-origin: 0 90%;
    transition: all .2s;
    display: block
}

.leftBox .trashCanImgBox .img2 {
    position: relative;
    width: 100%
}

.leftBox .trashCanImgBox .open {
    transform: rotate(-30deg)
}

#selectBoxOwn {
    min-width: 375px;
    min-height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    position: absolute;
    background: #fff;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 14px
}

.topBtnsBox {
    position: absolute;
    right: 12px;
    top: 14px;
    height: 45px;
    z-index: 99999;
    width: auto;
    overflow: hidden
}

.topBtnsBox .topBtn {
    width: 45px;
    height: 45px;
    margin-left: 10px;
    float: left
}

.rightBtnsBox {
    position: absolute;
    right: 12px;
    top: 50%;
    right: 15px;
    width: 35px;
    z-index: 99999;
    transform: translateY(-60%);
    background: #fff;
    border-radius: 35px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25);
    padding: 5px 0
}

.rightBtnsBox .rightBtn {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    padding: 10px 0;
    display: block
}

.playBtn {
    width: 60px;
    height: 60px;
    position: absolute;
    display: block;
    right: 14px;
    bottom: 14px;
    z-index: 99999
}

.blocklyScrollbarHandle {
    opacity: 0
}

.cantClick {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .25);
    position: absolute;
    z-index: 9;
    top: 0;
    right: 0
}

.blocklySvg {
    background: #eee !important
}

.blocklyMainBackground {
    stroke: #eee !important
}

.blocklyEditableText g text {
    fill: #575e75
}

.blocklyDraggable>text,
.blocklyEditableText>text {
    fill: #fff !important
}

.masterBeWhite text {
    fill: #fff
}